<template>
  <div class="allBox"  @keyup="enterLogin($event)">
      <div class="itemTitle">MEX后台管理系统</div>
      <div class="loginBox">
        <div class="loginTitle">
         <Row>
           <Col span="24">登录</Col>
         </Row>
        </div>
        <div class="login">
          <Row>
            <Col span="20" offset="2">
            <p>用户名：</p>
            <Input v-model="username"  type="text"  placeholder="请输入用户名" />
            <br><br>
            <p>密码：</p>
            <Input v-model="passwd" type="password" placeholder="请输入密码" />
            </Col>
          </Row>
          <br>
          <Row>
            <Col span="20" offset="2">
            <Button  type="success" @click="loginClick" >登录</Button>
            </Col>
          </Row>
        </div>
      </div>
  </div>

</template>

<script type="text/javascript">
	export default{
		data(){
		  return{
        username:'',
        passwd:'',
      }
		},
    methods:{
      loginClick:function(){
        let self = this;
        if(self.username.replace(/(^\s*)|(\s*$)/g, "" ) == ''){
          this.$Message.warning('用户名不能为空！')
          return
        }else if(self.passwd.replace(/(^\s*)|(\s*$)/g, "" ) == ''){
          this.$Message.warning('密码不能为空！')
          return
        }
        var promise = self.utils.getPubkey(self);
        promise.then(function () {
          var encrypt = self.$JSEncrypt;
          encrypt.setPublicKey(self.publicKey);
          self.$http.post(self.service+"/user/login",{
              username:self.username,
              password:encrypt.encrypt(self.passwd)
          }).then(function (res) {
            if(res.data.code == '001'){
              self.$Message.success('登录成功！');
              self.$http.defaults.headers.common['userId'] =self.cookie.getCookie('userId') ;
              self.$http.defaults.headers.common['ticket'] = self.cookie.getCookie('ticket');
              self.$http.defaults.headers.common['account'] = self.cookie.getCookie('account');
              self.$http.defaults.headers.common['login_auth_token'] = self.cookie.getCookie('login_auth_token');
              self.$http.defaults.headers.common['money_auth_token'] = self.cookie.getCookie('money_auth_token');
              localStorage.menus = JSON.stringify(res.data.result.data)
              self.$router.push({path:'/index'})
            }else{
              self.$Message.error('登录失败！'+res.data.msg);
            }
          })
        })
    },
      //回车登录事件
      enterLogin:function(ev){
        if(ev.keyCode == 13){
          this.loginClick();
        }
      },
    },
    mutation:function () {
    }
	}
</script>
<style scoped>
	.login{
    margin-top: 20px;
	}
  .login p{text-align: left;line-height: 25px;font-size: 14px}
  .allBox{
    float: left;
    width: 100%;
    position: fixed;
    height: 100%;
    background: -webkit-linear-gradient(left, #242828 , #17efe2); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right,  #242828 , #17efe2); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right,  #242828 , #17efe2); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right,  #242828  , #17efe2); /* 标准的语法 */
    height: 100%;
  }
  .loginBox{
    width: 400px;
    height: auto;
    padding-bottom: 2%;
    background: rgba(255,255,255,1);
    margin: 15% auto;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255,255,255,1);
    transform:scale(1.5)
  }
  .loginTitle{
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    color:#464c5b;
    font-weight:bold;
    background: #eee;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: 1px solid #e3e3e3;

  }
  .itemTitle{
    float: left;
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-top: 5%;
    font-size: 25px;
    color: #000;
    font-weight: bold;
    transform:scale(1.5)
  }
</style>
